<!DOCTYPE html>
<html>
<head>
  <title>bpmn-js modeler demo</title>
  <link href="vendor/bootstrap/assets/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="vendor/dmn-js/assets/diagram-js.css">
  <link rel="stylesheet" href="vendor/dmn-js/assets/dmn-js-shared.css">
  <link rel="stylesheet" href="vendor/dmn-js/assets/dmn-js-drd.css">
  <link rel="stylesheet" href="vendor/dmn-js/assets/dmn-js-decision-table.css">
  <link rel="stylesheet" href="vendor/dmn-js/assets/dmn-js-decision-table-controls.css">
  <link rel="stylesheet" href="vendor/dmn-js/assets/dmn-js-literal-expression.css">
  <link rel="stylesheet" href="vendor/dmn-js/assets/dmn-font/css/dmn.css">
  <link rel="stylesheet" href="vendor/dmn-js-properties-panel/assets/properties-panel.css" />
  
  <style>
    .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }

    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }

    .b-example-divider {
      height: 3rem;
      background-color: rgba(0, 0, 0, .1);
      border: solid rgba(0, 0, 0, .15);
      border-width: 1px 0;
      box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
    }

    .b-example-vr {
      flex-shrink: 0;
      width: 1.5rem;
      height: 100vh;
    }

    .bi {
      vertical-align: -.125em;
      fill: currentColor;
    }

    .nav-scroller {
      position: relative;
      z-index: 2;
      height: 2.75rem;
      overflow-y: hidden;
    }

    .nav-scroller .nav {
      display: flex;
      flex-wrap: nowrap;
      padding-bottom: 1rem;
      margin-top: -1px;
      overflow-x: auto;
      text-align: center;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
    }
    .flex-fill {
    flex:1;
    }
  </style>
</head>
<body>
  <header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6" href="#">Company name</a>
    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <input class="form-control form-control-dark w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
    <div class="navbar-nav">
      <div class="nav-item text-nowrap">
        <a class="nav-link px-3" href="#">Sign out</a>
      </div>
    </div>
  </header>

  <div class="container-fluid d-flex h-75">
    <div class="row flex-fill">
      <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
        <div class="position-sticky pt-3">
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="workflow.html">
                <span data-feather="home" class="align-text-bottom"></span>
                编辑/发布工作流
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="process.html">
                <span data-feather="file" class="align-text-bottom"></span>
                查看工作流
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="rules.html">
                <span data-feather="users" class="align-text-bottom"></span>
                编辑/发布规则
              </a>
            </li>
          </ul>
  
        </div>
      </nav>


<main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
  <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">编辑规则</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
      <div class="btn-group me-2">
        <a type="button" class="btn btn-sm btn-outline-secondary" id="js-download-diagram">DMN图表文件</a>
        &nbsp;&nbsp;
        <a type="button" class="btn btn-sm btn-outline-secondary" id="js-deployment">部署DMN</a>
      </div>
    </div>
  </div>
  <div class="content" id="js-drop-zone">

    <div class="message intro">
      <div class="note">
        把本地的DMN文件拖到浏览器或者 <a id="js-create-diagram" href>新建一个DMN</a>
      </div>
    </div>

    <div class="message error">
      <div class="note">
        <p>出问题了，无法展示DMN图表</p>

        <div class="details">
          <span>问题原因</span>
          <pre></pre>
        </div>
      </div>
    </div>

    <div class="canvas" id="js-canvas"></div>
    <div class="properties-panel-parent" id="js-properties-panel"></div>

  </div>
</main>
</div>
</div>
<script src="vendor/bootstrap/assets/bootstrap.bundle.min.js"></script>
<script src="rules.bundle.js"></script>
</body>
</html>
